<template>
	<base-page backgroundColor="white">
		<view class="px-16 py-8 fs-12 bg-default">为确保资金安全及佣金顺利提现，请正确填写以下信息。</view>
		<view v-if="errorMsg" class="h-36 flex item-center px-16 leading-17 fs-12 color-primary" style="background:rgba(250, 69, 67, 0.30);">
			{{ errorMsg }}
		</view>
		<view class="p-16 fs-14 text-color-regular">
			<view class="flex item-center">
				<text class="mr-8 flex-shrink" style="width:80px;">真实姓名：</text>
				<input v-model="formData.personName" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入真实姓名" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">身份证号：</text>
				<input v-model="formData.certNo" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入身份证号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<view class="label-box">证件有效期：</view>
				<uni-data-checkbox selectedColor="rgba(0, 174, 255, 1)" selectedTextColor="rgba(0, 174, 255, 1)"
					v-model="formData.certValidityType" :localdata="certValidityTypes" />
			</view>
			<!-- <view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">证件有效期：</text>
				<view class="inline-flex item-center">
					<view class="inline-flex item-center mr-32">
						<image src="@/static/svg/radio-default.svg" class="size-12 mr-4"></image>
						<text class="text-color-hint fs-14">长期有效</text>
					</view>
					<view class="inline-flex item-center">
						<image src="@/static/svg/radio-selected.svg" class="size-12 mr-4"></image>
						<text class="text-color-regular fs-14">非长期有效</text>
					</view>
				</view>
			</view> -->
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink">证件有效期开始日期：</text>
				<uni-datetime-picker placeholder="请选择证件有效期开始日期" v-model="formData.certBeginDate" type="date">
					<view class="flex justify-between item-center h-36 px-12 bg-default radius-12">
						<text class="fs-14 text-color-regular">{{formData.certBeginDate}}</text>
						<image src="@/pagesB/static/icon-calendar.png" class="size-16"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view v-if="formData.certValidityType === 0" class="flex item-center mt-16">
				<text class="mr-8 flex-shrink">证件有效期截止日期：</text>
				<uni-datetime-picker placeholder="请选择证件有效期结束日期" v-model="formData.certEndDate" type="date" :start="formData.certBeginDate">
					<view class="flex justify-between item-center h-36 px-12 bg-default radius-12">
						<text class="fs-14 text-color-regular">{{formData.certEndDate}}</text>
						<image src="@/pagesB/static/icon-calendar.png" class="size-16"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="mt-16">
				<view class="flex item-center">
					<text class="mr-8 flex-shrink" style="width:80px;">账户名称：</text>
					<input v-model="formData.cardName" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入账户名称" placeholder-class="text-color-hint" />
				</view>
				<view class="fs-12 leading-17 mt-8" style="margin-left:84px;color:rgba(0, 0, 0, 0.30);">请填写与入驻时提供的身份证一致的银行卡信息</view>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡号：</text>
				<input v-model="formData.cardNo" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入银行卡号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行所在地：</text>
				<picker
					class="flex-1 h-36 text-color-regular bg-default radius-12 px-12"
					style="line-height:36px;"
					mode="multiSelector"
					range-key="localName"
					@columnchange="onnodeclick"
					:range="[provinceList, cityList]"
					@change="onchange"
				>
					<view :style="{color:formData.bankProvinceName?'':'#A5A7A9'}"
						class="flex item-center justify-between">
						<text> {{formData.bankProvinceName ?
						formData.bankProvinceName + (formData.bankCityName ? '/' + formData.bankCityName : '')
						: '请选择银行卡所在地'}}</text>
						<image class="w-6 h-12 ml-4" src="@/static/svg/arrow-stroke.svg"></image>
					</view>
				</picker>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡绑定手机号：</text>
				<input v-model="formData.mobile" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入银行卡绑定手机号" placeholder-class="text-color-hint" />
			</view>
		</view>
		
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认</view>
		</template>
	</base-page>
</template>

<script setup>
	import uniDataCheckbox from '@/pagesB/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue';
	import { ref, computed, getCurrentInstance, onMounted } from 'vue'
	import { listHfAllRegionApi } from '@/api/common.js'
	import { bindHf } from '@/pagesG/api/withdrawal.js'
	import { useUserStore } from '@/stores/modules/user.js'
	const userStore = useUserStore()
	
	const instance = getCurrentInstance()
	
	const errorMsg = ref('')
	
	const formData = ref({
		bankCityCode: '', // 银行所在地市code
		bankCityName: '', // 银行所在地市名称
		bankProvinceCode: '', // 银行所在地省份code
		bankProvinceName: '', // 银行所在地省份名称
		cardName: '', // 持卡人姓名
		cardNo: '', // 银行卡号
		certBeginDate: '', // 个人证件有效期开始日期
		certEndDate: '', // 个人证件有效期截止日期
		certValidityType: 0, // 个人证件有效期类型:0：非长期有效 ,1：长期有效
		personName: '', // 个人姓名
		mobile: '', // 银行卡绑定手机号
	})
	
	const certValidityTypes = ref([
		{text: '非长期有效',value: 0},
		{text: '长期有效',value: 1},
	])
	
	const disableSubmit = computed(() => {
		if(formData.value.certValidityType === 0){
			return !(formData.value.cardName && formData.value.cardNo && formData.value.bankProvinceName && formData.value.bankCityName && formData.value.certBeginDate && formData.value.certEndDate && formData.value.personName && formData.value.mobile)
		}else{
			return !(formData.value.cardName && formData.value.cardNo && formData.value.bankProvinceName && formData.value.bankCityName && formData.value.certBeginDate && formData.value.personName && formData.value.mobile)
		}
	})
	
	const onchange = ({ detail }) => {
		if (detail.value) {
			formData.value.bankProvinceName = provinceList.value[detail.value[0]].localName
			formData.value.bankProvinceCode = provinceList.value[detail.value[0]].code
			if (cityList.value && cityList.value.length) {
				formData.value.bankCityName = cityList.value[detail.value[1]].localName
				formData.value.bankCityCode = cityList.value[detail.value[1]].code
			} else {
				formData.value.bankCityName = ''
				formData.value.bankCityCode = ''
			}
		}
	}
	
	const onnodeclick = ({ detail }) => {
		if (detail.column === 0) {
			const province = provinceList.value[detail.value]
			cityList.value = province.regions || []
		}
	}
	const provinceList = ref([])
	const cityList = ref([])
	const getAllRegion = () => {
		listHfAllRegionApi().then(res => {
			provinceList.value = res
			if (res && res.length) {
				cityList.value = res[0].regions || []
			}
		})
	}
	/**
	 * 点击下一步，提交用户业务入驻，返回汇付入驻结果
	 * 入驻失败，绑定银行卡页面，提示失败原因，可重新提交；
	 * 入驻成功，调用灵活用工个人签约，进行签约
	 */
	const submit = () => {
		if (disableSubmit.value) return
		bindHf(formData.value).then(res => {
			const eventChannel = instance.ctx.getOpenerEventChannel()
			eventChannel.emit('onBindingSuccess', { result: true })
			uni.navigateTo({
				url: '/pagesG/withdraw/waiting-audit'
			})
		})
		// // 入驻成功
		// uni.navigateTo({
		// 	url: '/pagesG/withdraw/sign',
		// 	events: {
		// 		onSignResult(res) {
		// 			console.log('签约结果', res)
		// 			if (res.result) {
		// 				const eventChannel = instance.ctx.getOpenerEventChannel()
		// 				eventChannel.emit('onBindingSuccess', { result: true })
		// 				uni.navigateBack()
		// 			} else {
		// 				errorMsg.value = withdrawStore.refuseReason
		// 			}
		// 		}
		// 	}
		// })
	}
	onMounted(() => {
		getAllRegion()
		formData.value.mobile = userStore.userInfo.mobile
	})
</script>
